<template>
	<div class="app-container">
		<div class="app-box">
			<div class="detailcon-top">
				<p><i class="iconfont icon-baoxianchanpin now"></i><span class="set10">佣金发放详情</span>
				<a :href='urlnow'><el-button size="mini" type="info" class='toRight'>
					返回
				</el-button></a>
				</p>
				<div class="top-con">
					<p class="setP">
						<span class="p1">操作时间：&nbsp;&nbsp;<span>{{creationTime}}</span></span>
						<span class="p1">操作人：&nbsp;&nbsp;<span>{{name}}（{{userName}}）</span></span>
					</p>
					<p class="setP">
						<span class="p1">发放笔数：&nbsp;&nbsp;<span>{{submitCount}}&nbsp;条</span></span>
						<span class="p1">总金额：&nbsp;&nbsp;<span>{{totalCost | numFilter}}&nbsp;元</span></span>
						<span class="p1">成功条数：&nbsp;&nbsp;<span>{{successCount}}&nbsp;条</span></span>
						<span class="p1">成功金额：&nbsp;&nbsp;<span>{{successCost | numFilter}}&nbsp;元</span></span>
						<span class="p1">失败条数：&nbsp;&nbsp;<span>{{faildCount}}&nbsp;条</span></span>
						<span class="p1">失败金额：&nbsp;&nbsp;<span>{{faildCost | numFilter}}&nbsp;元</span></span>
					</p>
					<p>
						<span class="p1">备注：&nbsp;&nbsp;<span>{{remarks}}</span></span>
					</p>
				</div>
			</div>
			<div class="detailcon-search">
				<div class="search-con">
				  <el-form  :model="formLabel" :inline="true" class='inputBox' :label-position="toLeft" label-width="90px">
				    <el-form-item label="状　态"  label-width="60px" class='set20'>
				    	<el-select v-model="stateT" placeholder="请选择" size='mini' class='wd110'>
				    	  <el-option
						      v-for="item in stateoptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
					      </el-option>
					    </el-select>
				    </el-form-item>
				    <el-form-item label="搜　索"  label-width="60px">
		                <el-input v-model="formLabel.keyWord" placeholder="请输入姓名/手机号/身份证号" size="mini"  class="wd260"  @keyup.enter.native="toSearch"></el-input>
		            </el-form-item>
		            <el-button type='primary' size='mini' class='wd60' @click='toSearch'>搜索</el-button>
			     </el-form>
				</div>
			</div>
			<div class="detailcon-table">
				<div class="table-con">
					<el-table :data="tableData" style="width: 100%" :stripe='true' v-loading='loading'>
						<el-table-column  label="姓名" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.toUserName'>{{scope.row.toUserName}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="手机号" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.toUserPhoneNumber'>{{scope.row.toUserPhoneNumber}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="身份证号" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.toUserIdentityCard'>{{scope.row.toUserIdentityCard}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="转账金额" align='right'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.money'>{{scope.row.money | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="发放状态" align='center' width='160'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.executeState == 2'>
						 		<i class="icon iconfont icon-icon01" style="color:#389E0D;position: relative;top: 1px;"></i>
						 		成功</span>
						 		<span v-if='scope.row.executeState == 3'>
						 		<i class="icon iconfont icon-icon01" style="color:#FF0000;position: relative;top: 1px;"></i>
						 		失败</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="操作" width='120' align='right'>
							<template slot-scope='scope'>
						 		<span class="setC" v-if='scope.row.executeState == 3' @click='toreSend(scope.row.toUserId)'>重新发送</span>
						 	</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="detailcon-page">
				<el-pagination @current-change="handleCurrentChange" :current-page.sync='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
			</div>
		</div>
	</div>

</template>

<script>
import Vue from 'vue';
	export default{
		data(){
			return{
				toLeft:'left', //label的对齐方式
				formLabel:{}, //对象
		        pagetotal:0, //总页数
		        currentPage:1,//当前页
		        BeginDate:'', //开始时间
		        EndDate:'',//结束时间
		        allmoney:null, //钱数总额
		        stateoptions:[{
		        	label:'全部',
		        	value:0
		        },{
		        	label:'成功',
		        	value:1
		        },{
		        	label:'失败',
		        	value:2
		        }],   //状态值
		        stateT:0, //默认状态
		        balance:'', //一般户余额
		        totalBalance:'', //平台余额
		        batchId:null, //当前id
		        creationTime:'',
		        name:'',
		        userName:'',
		        submitCount:null,
		        successCount:null,
		        faildCount:null,
		        transferCount:null,
		        totalCost:null,
		        successCost:null,
		        faildCost:null,
		        remarks:'',
				loading:false,
				tableData:[],
		        urlnow:''
			}
		},
		mounted(){
			if(this.$route.query.batchId){
				this.batchId = this.$route.query.batchId;
				// this.batchId = '7ff67be8-e2da-42c9-a01b-c5b6a0dd4772';
				if(this.$route.query.pageIndex){
					this.currentPage = this.$route.query.pageIndex;
					this.formLabel.keyWord = this.$route.query.keyWord;
					if(this.$route.query.state){
						this.stateT = Number(this.$route.query.state);
					}
				}
			}
			if(this.$route.params.urlnow){
				console.log(this.$route.params.urlnow);
				console.log('======================================');
				this.urlnow = this.$route.params.urlnow;
			}
			this.getList();
		},
		watch:{
		  $route(to,from){
		    console.log(this.$route.query.pageIndex);
		    console.warn('------------------------------------');
			this.currentPage = this.$route.query.pageIndex;
			this.batchId = this.$route.query.batchId;
			this.formLabel.keyWord = this.$route.query.keyWord;
			if(this.$route.query.state){
				this.stateT = Number(this.$route.query.state);
			}
			this.getList();
			this.tableData.concat([]);

			if(this.$route.params.urlnow){
				console.log(this.$route.params.urlnow);
				console.log('======================================1');
				this.urlnow = this.$route.params.urlnow;
			}
		  }
		},
		filters:{
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
		  }
		},
		methods:{
			//页码
		    handleCurrentChange(val){
		    	 console.log(`每页 ${val} 条`);
		    	 this.currentPage = val;
		    	 this.$router.push({
		    		name:'detailcon',
		    		query:{
		    			batchId: this.batchId,
			    		pageIndex:this.currentPage,
			    		state:this.stateT,
			    		keyWord:this.formLabel.keyWord,
			    		time: new Date().getTime(),
					},
					params:{
						urlnow:this.urlnow
					}
		    	})
		    },
		    // 列表
		    getList(){
		    	const _this = this;
		    	_this.loading = true;
		    	let params={};
		    	if(_this.currentPage){
		    		params={
			    		batchId: _this.batchId,
			    		transferState : _this.stateT,
			    		queryKey : _this.formLabel.keyWord,
			    		pageIndex : _this.currentPage
			    	};
		    	}else{
					params={
			    		batchId: _this.batchId,
			    		transferState : _this.stateT,
			    		queryKey : _this.formLabel.keyWord
			    	};
		    	}
		    	this.post(params,'services/app/applets/GetTransferBatchDetailList').then(rs => {
		    		if(rs.success){
		    			console.log(rs.result);
		    			_this.loading = false;
		    			_this.pagetotal = rs.result.totalCount;
		    			_this.tableData = rs.result.items;
		    			console.warn(_this.tableData);
		    			_this.creationTime = rs.result.creationTime; //提交时间
		    			_this.name = rs.result.name; //姓名
		    			_this.userName = rs.result.userName; //登录名
		    			_this.submitCount = rs.result.submitCount; //提交数
		    			_this.successCount = rs.result.successCount; //成功数
		    			_this.faildCount = rs.result.faildCount; //失败数
		    			_this.transferCount = rs.result.transferCount; //正在转账
		    			_this.totalCost = rs.result.totalCost; //总金额
		    			_this.successCost = rs.result.successCost; //成功金额
		    			_this.faildCost = rs.result.faildCost; //失败金额
		    			_this.remarks = rs.result.remarks; //备注
		    			if(_this.$route.query.pageIndex){
		    				_this.currentPage = Number(_this.$route.query.pageIndex);
		    			}
		    		}
		    	})
		    },
		    // 搜索
		    toSearch(){
		    	this.$router.push({
		    		name:'detailcon',
		    		query:{
		    			batchId: this.batchId,
			    		pageIndex:1,
			    		state:this.stateT,
			    		keyWord:this.formLabel.keyWord,
			    		time: new Date().getTime(),
					},
					params:{
						urlnow:this.urlnow
					}
		    	})
		    	// this.getList();
		    },
		    // 跳页
		    toOutput(){
		    	this.$router.push({
		    		name:'putout'
		    	})
		    },
		     // 重新发送
		    toreSend(id){
		    	this.$router.push({
		    		name:'manageIndex',
		    		// query:{
		    		// 	id:id
		    		// }
		    	})
		    },
		}
	}

</script>

<style lang='scss' scoped>
.wd260{
	width: 260px;
}
.wd60{
	width: 60px;
	margin-left:20px;
}
.wd110{
	width:110px;
}
.set10{
	margin-right:10px;
}
.set20{
	margin-right:20px;
}
.toRight{
	float: right
}
	.app-container{
		.app-box{
			.detailcon-top{
				p{
					font-size:18px;
					margin-top:0;
					margin-bottom:30px;
					i{
						font-size:18px;
						margin-right: 12px;
					}
				}
				.setP{
					margin-bottom: 16px !important;
				}
				.now{
					font-size:18px;
					color:#FF7819;
				}
				.top-con{
					background-color:#eaf5fb;
					padding:15px 30px;
					margin-bottom:30px;
					p{
						line-height:18px;
						margin:0;
					}
					.p1{
						font-size: 12px;
						margin-left:20px;
						color:#95bacc;
						span{
							font-size:12px;
							color:#2e94c5;
						}
					}
				}
			}
			.detailcon-search{
				.search-con{
					// height:28px;
					margin-bottom:8px;
				}
			}
			.detailcon-table{
				.table-con{
					font-size:13px;
					.setC{
						color:#027dca;
						cursor:pointer;
					}
					.setRed{
						color:#FF0000;
					}
					.setGreen{
						color:#389E0D;
					}
					.con-info{
						.info1{
							display:block;
							color:#999;
							font-size:12px;
						}
					}
				}
			}
			.detailcon-page{
				margin:50px 0 20px 0;
				text-align:right;
			}
		}
	}
</style>